<template>
  <div>
    <el-table :data="store.getters['menu/getMenuList']" boder style="width: 100%" row-key="id" 
      :tree-props="{ children: 'children' }">
      <el-table-column prop="id" label="菜单编号" width="80" />
      <el-table-column prop="title" label="菜单名称" width="180" />
      <el-table-column prop="pid" label="上级菜单" width="180" />
      <el-table-column prop="icon" label="菜单图标" width="80">
        <template v-slot="item">
          <div>
            <el-icon>
              <component :is="item.row.icon"></component>
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="菜单地址" width="180" />
      <el-table-column prop="status" label="状态">
        <template v-slot="item">
          <div>
            <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="180">
        <template v-slot="item">
          <div>
            <el-button @click="edit(item.row.id)" type="primary" size="small" plain>编辑</el-button>
            <el-button @click="del(item.row.id)" type="danger" size="small" plain>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { menuDelete } from '@/request/api';
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineEmits } from 'vue';
let emit = defineEmits(['edit'])
let store = useStore();
store.dispatch('menu/ChangeMenuAction')
let edit = (id:number) => {
  emit('edit',id)
}
let del = (id: number): void => {
  ElMessageBox.confirm(
    '你确定要删除这条数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    menuDelete({ id }).then((res:any)=>{
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg)
        store.dispatch('menu/ChangeMenuAction')
      } else {
        ElMessage.error(res.data.msg)
      }
    })
  }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
</script>

<style scoped>
.el-button {
  margin: 10px 5px;
}
</style>